<template>
	<view class="task-detail-container">
		<view class="home-item-container" :selectable="false">
			<view class="item-header-container">
				<u-avatar :src="avater" size="mini"></u-avatar>
				<view class="info">
					<view class="user u-flex">
						<view class="user-name">{{userName}}</view>
						<view class="sex-icon">
							<template v-if="sex === 'woman'">
								<u-image :src="woman" width="20px" height="20px"></u-image>
							</template>
							<template v-else-if="sex === 'man'">
								<u-image :src="man" width="20px" height="20px"></u-image>
							</template>
						</view>
					</view>
					<view class="other u-flex u-row-between">
						<view class="date">{{postDate}}</view>
						<view class="school">{{school}}</view>
					</view>
				</view>
			</view>
			<view class="item-content-container">
				<view class="task-head u-flex u-row-between">
					<view class="title">
						{{title}}
					</view>
					<view class="price">
						{{price}}元
					</view>
				</view>
				<view class="task-content">
					<view class="postPerson u-flex item">
						<u-image src="../../../static/carry-inner-icon/task-detail/person.png" height="18px" width="18px">
							<u-loading slot="loading"></u-loading>
						</u-image>
						<view class="title">发布人</view>
						<view class="content u-flex u-flex-wrap u-flex-1">{{postPerson}}</view>
					</view>
					<view class="phone u-flex item">
						<u-image src="../../../static/carry-inner-icon/task-detail/phone.png" height="18px" width="18px">
							<u-loading slot="loading"></u-loading>
						</u-image>
						<view class="title">联系电话</view> 
						<view class="content u-flex u-flex-wrap u-flex-1">{{phoneNumber}}</view>
					</view>
					<view class="from-place u-flex item none">
						<u-image src="../../../static/carry-inner-icon/home-item/to_bule.png" height="18px" width="18px">
							<u-loading slot="loading"></u-loading>
						</u-image>
						<view class="title">取件地点</view>
						<view class="content u-flex u-flex-wrap u-flex-1">{{fromPlace}}</view>
					</view>
					<view class="to-place u-flex item">
						<u-image src="../../../static/carry-inner-icon/home-item/to_red.png" height="18px" width="18px">
							<u-loading slot="loading"></u-loading>
						</u-image>
						<view class="title">送达地点</view>
						<view class="content u-flex u-flex-wrap u-flex-1">{{toPlace}}</view>
					</view>
					<view class="remarks u-flex item none">
						<u-image src="../../../static/carry-inner-icon/task-detail/bz.png" height="18px" width="18px">
							<u-loading slot="loading"></u-loading>
						</u-image>
						<view class="title">备注</view>
						<view class="content u-flex u-flex-wrap u-flex-1">{{remarks}}</view>
					</view>
				</view>
			</view>
			<view class="task-status" v-if="statusIndex != 3">
				<!-- 任务状态不为已取消时显示 -->
				<!-- 任务状态 -->
				<view class="title">
					任务状态
				</view>
				<view class="now-steps">
					<!-- 任务当前步骤条 -->
					<u-steps :list="stepList" :current="statusIndex"></u-steps>
				</view>
				<template v-if="status === '待接单' && userId != vuex_userInfo.userId">
					<view class="operation-container">
						<!-- 操作组 -->
						<u-button type="primary" :ripple="true" ripple-bg-color="#eee" @click="reConfirm">接单</u-button>
					</view>
				</template>
			</view>
			<view v-else class="task-status">
				<!-- 任务当前步骤条 -->
				<view class="title">
					任务状态
				</view>
				<u-steps :list="[{name:'已发布'},{name: '已取消'}]" :current="1"></u-steps>
			</view>
		</view>
		<u-modal v-model="show" :title-style="{color: 'red'}" :content="modal.content" showCancelButton @cancel="onCancel"
		 @confirm="onConfirm">
		</u-modal>
	</view>
</template>

<script>
	/*
	 * 臧锡洋
	 * 2020年11月24日 06:26:54
	 * 任务详细页
	 * V2
	 */
	export default {
		onLoad: function(options) {
			// 进入订单详情页获取id
			if (this.vuex_loginStatus == 0) {
				//当前未登录 进行必要提示并且前往登录
				/* uni.showModal({
					title: "您当前没有登录",
					content: '缺少必要的权限,请先登录',
					confirmText: '了解',
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							uni.switchTab({
								url: '/pages/tabPages/my'
							});
						}
					}
				}) */
				uni.reLaunch({
					url:'../../tabPages/my' // 进入我的会自动鉴权,直接reLaunch
				})
				return //拦截
			}

			if (options.from == 'home') {
				// 从首页进入详情页
				let id = options.id
				this.$u.api.getTaskDetailById(id).then(res => {
					console.log(res)
					this.avater = res.data.imageUrl
					this.userName = res.data.nikeName
					this.title = res.data.taskTitle
					this.price = res.data.moneyReward
					this.toPlace = res.data.toAddress
					this.fromPlace = res.data.pickUpAddress
					this.postDate = res.data.publishTime
					// 老板说为了安全考虑,暂不显示
					// this.phoneNumber = res.data.publishPhone
					this.phoneNumber = '接单后显示'
					this.postPerson = res.data.publishName
					this.school = res.data.school
					this.sex = (res.data.sex == 0 ? 'woman' : 'man')
					// this.remarks = res.data.workContent
					// 老板说为了安全性考虑暂不显示
					this.remarks = '接单后显示'
					this.taskId = res.data.taskId
					this.userId = res.data.publishId
				})

			} else if (options.from == 'taskCenter') {				
				// 从任务中心进入详情页
				const eventChannel = this.getOpenerEventChannel()
				let infos = {}
				// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
				eventChannel.on('acceptDataFromOpenerPage', function(data) {
					infos = data
				})
				
				this.avater = infos.imageUrl
				this.userName = infos.nikeName
				this.title = infos.taskTitle
				this.price = infos.moneyReward
				this.toPlace = infos.toAddress
				this.fromPlace = infos.pickUpAddress
				this.postDate = infos.publishTime
				this.phoneNumber = infos.publishPhone
				this.postPerson = infos.publishName
				this.school = infos.school
				this.sex = (infos.sex == 0 ? 'woman' : 'man')
				this.remarks = infos.workContent
				this.taskId = infos.taskId
				this.statusIndex = infos.taskStatus
				switch(this.statusIndex){
					case 0:
						this.status = "待接单"
						break;
					case 1:
						this.status = "已接单"
						break;
					case 2:
						this.status = "已完成"
						break;
					case 3:
						this.status = "已取消"
						break;
				}
				this.userId = infos.publishId
			}





		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		data() {
			return {
				avater: require('../../../static/carry-inner-icon/my_no_login_icon.png'),
				userName: '**',
				postDate: '**',
				school: '**',
				fromPlace: '**',
				toPlace: '**',
				title: '**',
				price: '**',
				remarks: '接单后可查看详情',
				/* 性别icon */
				sex: 'woman',
				man: require('../../../static/carry-inner-icon/home-item/icon_sex_man.png'),
				woman: require('../../../static/carry-inner-icon/home-item/icon_sex_woman.png'),
				stepList: [{
						name: '待接单'
					},
					{
						name: '已接单'
					},
					{
						name: '已完成'
					}
				],
				status: '待接单',
				// step指向
				statusIndex: 0,
				postPerson: '***',
				phoneNumber: '*****',
				// 模态框 - 确认是否接单
				show: false,
				modal: {
					title: '是否确认接单?',
					content: '您确认接取该订单吗?'
				},
				// 当前任务的ID
				taskId: '',
				//当前发起订单人的ID
				userId:''

			};
		},
		mounted() {
			// 当页面被挂载

			// 设置当前窗口的背景色为白色
			uni.setBackgroundColor({
				backgroundColor: '#ffffff'
			});


		},
		methods: {
			reConfirm() {
				// 打开模态框进行二次确认 - 是否接单
				this.show = true
			},
			onConfirm() {
				if(this.vuex_loginStatus == 1 && this.vuex_registerStatus == false){
					// 当前为登录状态但是没有完善信息
					
					uni.reLaunch({
						url:'../register/register' //跳转到注册页面
					})
					return // 拦截操作
				}
				// 点击确认回调
				this.$u.api.acceptTask(this.taskId).then(res => {
					// 确认接取订单
					// 更改本地接单状态
					this.statusIndex = 1 ; //更改当前step的状态为已接单
					// modal提示
					uni.showModal({
						title: '提示',
						content: '你已经接单成功!',
						showCancel: false,
						confirmText: '知道了',
						success: (res)=>{
							if(res.confirm){
								//用户点击了确定
								uni.reLaunch({
									url:'/pages/tabPages/index'//重载首页
								})
							}
						}
					})
				})
			},
			onCancel() {
				// 点击关闭回调
				this.show = false
			}
		}
	}
</script>

<style>
	html {
		background: #fff;
	}
</style>
<style lang="scss">
	.home-item-container {
		position: relative;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
		/* 每一个都需要item间隔 */
		margin-bottom: 25rpx !important;

		/* item头部 */
		.item-header-container {
			display: flex;

			.info {
				display: flex;
				flex-direction: column;
				width: 100%;
				margin-left: 20rpx;

				.user {
					font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
					font-weight: 600;
					color: #222;
					font-size: 15px;

					.sex-icon {
						margin-left: 20rpx;
					}
				}

				.other {
					color: #82848A;
					font-size: 12px;
				}
			}
		}

		/* item中部 - 任务card */
		.item-content-container {
			margin: 10rpx 20rpx;
			padding: 20rpx 30rpx;
			padding-top: 0 !important;
			background-color: rgba(255, 240, 208, 0.5);
			border-radius: 5px;

			.task-head {
				padding: 15rpx 0;
				font-size: 18px;
				font-weight: bold;
				border-bottom: 1px solid #f0f0f0;

				.title {
					color: #111;
				}

				.price {
					color: #f50000;
				}
			}

			.task-content {
				padding: 20rpx 0;
				padding-top: 0 !important;

				.item {
					padding: 20rpx 0;
					border-bottom: 1px solid #eeeeee;

					&.none {
						border: none !important;
					}
				}

				.title {
					color: #606266;
					margin-left: 30rpx;
					width: 120rpx;
				}

				.content {
					margin-left: 30rpx;
				}
			}
		}

		.task-status {
			margin: 15rpx 0;

			.title {
				font-weight: bold;
				padding: 15rpx;
			}

			.now-steps {
				padding: 20rpx 0;
			}

			.operation-container {
				margin: 10rpx 70rpx;
			}
		}
	}
</style>
